<template>
    <el-container>
        <el-header class="el-header-fix">
            <div class="left">{{ this.$store.state.app.name }}</div>
            <div class="right">
                <div class="flex items-center">
                        <span class="text-large font-600 mr-3" style="margin-right: 10px;">
                            Welcome, {{ this.$store.state.user.username || '未登录' }}
                        </span>
                    <a @click="logout" style="cursor: pointer;margin-right:30px;color:white">注销</a>
                </div>
            </div>
        </el-header>

        <el-container>
            <el-aside width="200px" class="el-aside">
                <el-menu
                    :default-active="$route.path"
                    background-color="#fff"
                    text-color="#312f2fd4"
                    text-align="left"
                    active-text-color="#fff"
                >
                    <Menu :navMenus="menuData"></Menu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
import Menu from "@/components/pc/Menu.vue";
import menu from "@/router/menu";

export default {
    name: "DashBoard",
    components: {
        Menu: Menu
    },
    data() {
        return {
            activeIndex: '/index',
            menuData: [],
            year: new Date().getFullYear()
        };
    },
    mounted() {
        if (this.$store.state.user.role === 1) {
            this.menuData = menu.root
        } else if (this.$store.state.user.role === 2) {
            this.menuData = menu.staff
        }

        let start = window.location.href.lastIndexOf('/');
        let path = window.location.href.slice(start + 1);
        this.activeIndex = path;
        this.$router.push(path)
    },
    methods: {
        logout() {
            this.$store.commit('REMOVE_INFO');
            this.$router.push('/');
        }
    }
};
</script>

<style scoped>
.el-header-fix {
    background-color: rgb(23, 146, 255);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-large {
    color: white;
}

.el-aside {
    background-color: #fff;
    height: calc(100vh - 60px);
    border: 0;
}

.el-main {
    --el-main-padding: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #f0f2f5;
    padding: 10px 5px;
}

.el-footer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    bottom: 0;
    text-align: right;
    width: 100%;
}

.el-page-header__header {
    margin-left: 10px;
    margin-bottom: 10px;
}

.el-menu-item:hover {
    background-color: rgb(154 181 219 / 22%);
}
</style>